<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>查看报表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
    <script src="/js/common/language.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery-1.9.1.js"></script>
    <link href="/lib/budget/styles.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="/css/budget/viewReport.css"/>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/Highcharts-5.0.14/code/highcharts.js"></script>
    <%--<script src="/lib/Highcharts-5.0.14/code/highcharts.js"></script>--%>
    <script src="../lib/Highcharts-5.0.14/code/highcharts-zh_CN.js"></script>
    <script src="../lib/Highcharts-5.0.14/code/modules/exporting.js"></script>
    <script src="../lib/Highcharts-5.0.14/code/modules/drilldown.js"></script>

    <style>
        .clearfix{
            padding-top: 44px;
            margin-top:0px;
        }
        input[type="text"]{
            width:120px;
            height:24px;
            border-radius:6px ;
            border: 1px solid rgb(221, 221, 221);
            outline: none;
            line-height:24px;
            padding-left:2px;
        }
        .sj{
            top: 10px;
            right: 9px;
        }
        #ulList{
            display: none;
            position: absolute;
            left: 0px;
            top: 24px;
            border: 1px solid #eee;
            background: #fff;
            z-index: 10;
            width: 600px;
            height: 400px;
            overflow: scroll;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
            text-decoration: none;
            color: #000000;
        }
        .checkbox_btn{
            left:214px;
        }
        #query{

            width: 52px;
            height: 24px;
            font-family: 'Arial Normal', 'Arial';
            font-style: normal;
            font-size: 13px;
            color: #fff;
            background: #2b7edf url(../../img/taisousuo.png) no-repeat 12px 5px;
            border: none;
            padding-left: 20px;
            border-radius: 5px;
            display: inline-block;
            text-align: center;
            line-height: 24px;
        }
        .check{
            width: 60px;
            height: 24px;
            font-family: 'Arial Normal', 'Arial';
            font-style: normal;
            font-size: 13px;
            color: #fff;
            border: none;
            padding: 0px 14px;
            border-radius: 5px;
            display: inline-block;
            background: #2b7fe0;
            text-align: center;
            line-height: 24px;
        }
        #year{
            height:24px;
            border-radius: 6px;
        }
        #container{
            width:70%;
            margin:0 auto;
            /*height:100%;*/
        }
        .list a{
            color: #2b7edf;
            text-decoration: none;
        }
        .ellip{
            width:50px;
            display: inline-block;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .hov{
            font-size: 12px;
            color: #808080 !important;
            height: 26px;
            line-height: 24px;
            text-align: center;
            padding: 0 8px;
            margin-right: 10px;
            background-color: #ffffff;
            border-radius: 4px;
            display: inline-block;
            border: solid 1px #c2c2c2;
        }
        .hov:hover{
            color: #1ea0fa !important;
            border: solid 1px #1ea0fa;
            cursor: pointer;
        }
        td:nth-child(1){
            text-overflow: initial!important;
            white-space: normal!important;
        }
        td{
            word-wrap: break-word!important;
            text-overflow: clip!important;
        }
        #bType{
            border-radius: 3px;
        }
        .btnss{display: none}
        /*.highcharts-axis-labels{*/
            /*color:red!important;*/
        /*}*/
    </style>
</head>
<body>
<div class="head w">
    <ul class="index_head">
        <%--<li data-num="0"><span class="headli1_1 " id="waitwork">预算执行报表</span><img class="headli1_2" src="../../img/twoth.png" alt="">--%>
        <%--</li>--%>
        <%--<li data-num="1"><span class="headli2_1 endWork" id="endWork">年度预算执行报表</span><img src="../../img/twoth.png" alt="" class="headli2_2">--%>
        <%--</li>--%>
        <%--<li data-num="2"><span class="headli2_1 endWork" id="tongji">预算执行报表统计</span><img src="../../img/twoth.png" alt="" class="headli2_2">--%>
        <%--</li>--%>
        <li data-num="3"><span class="headli3 one" id="yusuan">项目预算统计</span><img src="../../img/twoth.png" alt="" class="headli2_2"></li>
        <li data-num="4"><span class="headli3" id="mingxi">项目明细统计</span><img src="../../img/twoth.png" alt="" class="headli2_2"></li>
    </ul>
</div>
<div class="clearfix">
    <div class="div_Img">
        <img src="/img/yszxbb.png" style="margin-top: 25px;margin-left: 15px;vertical-align: middle;" alt="菜单主分类设置">
    </div>
    <p class="p1">项目预算报表</p>
</div>
<div class="nav" style="margin-left: 203px; margin-top: -51px;">
    <span>项目名称：</span>
    <div style="display:inline-block;position: relative" id="choose" >
        <input id="chooseItem" placeholder="请选择项目名称" type="text" value=""/>
        <span class="sj"></span>
        <div id="ulList" class="ax_default text_field">
        </div>
        <div class="checkbox_btn">
            <div class="btn"><span id="confirm_btn">确定</span><span id="cancel_btn">取消</span></div>
        </div>
    </div>
    <span>查询周期：</span>
    <input type="text" placeholder="请选择日期" id="budgetItemBegindate" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" ><span>-</span><input type="text"  placeholder="请选择日期" id="budgetItemEnddate" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" >
    <select name="" id="year">
        <option value="0">年度</option>
        <option value="1">月度</option>
        <option value="2">季度</option>
    </select>
    <span id="query">查询</span>
    <span class="check"  type="0" style="cursor:pointer">切换列表</span>
    <select name="" id="bType">
        <option value="0">柱状图</option>
        <option value="1">折线图</option>
    </select>
</div>
<div id="specialwz" style="    text-align: left;
    line-height: 28px;">

</div>
<%--<div class="btnss" style="text-align: center;">--%>
    <%--<span class="hov big" onclick="enlargeChart(this,true)">放大</span>--%>
    <%--<span class="hov small" onclick="enlargeChart(this,false)">放小</span>--%>
<%--</div>--%>
<div id="container">

</div>
<div id="content" style="display:none">
    <table id="uploadTable" style="width: 80%;margin: 0 auto;">
        <thead>
        <tr>
            <th style="width:30%">预算项目</th>
            <th>预算金额</th>
            <th>剩余金额</th>
            <th>预支出金额</th>
            <th>支出金额</th>
            <th>支出比例</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="list">

        </tbody>
    </table>
    <div class="row" style="margin-left: 10%;margin-top: 20px;">
        <%--<div class="pull-left" style="display:inline-flex;">--%>
            <%--<span id="total"></span>--%>
            <%--<span style="margin-left:5px;">每页显示--%>
            <%--<select id="forPage" style="width: 50px;">--%>
                <%--<option value="5">5</option>--%>
                <%--<option value="10">10</option>--%>
                <%--<option value="20">20</option>--%>
                <%--<option value="50">50</option>--%>
                <%--<option value="100">100</option>--%>
            <%--</select>--%>
            <%--条记录</span>--%>
        <%--</div>--%>
        <div id="page1" class="pull-right"></div>
    </div>
    <%--<div style="margin: -80px -10% 0px;height:50px;width: 97%;" class="clearfix">--%>
        <%--<div id="dbgz_page" class="M-box3">--%>
        <%--</div>--%>
    <%--</div>--%>
</div>
</body>
<script>
    $('.index_head li').click(function(){
        var datanums = $(this).attr('data-num');
        $(this).find('span').addClass('one').parent().siblings().find('span').removeClass('one');
        if (datanums == 0) {
            window.location.href = '/budget/viewReport';
        } else if (datanums == 1) {
            window.location.href = '/budget/yearViewReport';
        } else if (datanums == 2) {
            window.location.href = '/budget/reportStatistics';
        } else if (datanums ==3) {
            window.location.href = '/budget/budgetaryStatistics';
        }else if (datanums ==4) {
            window.location.href = '/budget/detailStatistics';
        }
    });
    <%--获取项目名称--%>
    //获取所有部门
    var checkboxs = '';
    var checkbox = '';
    $.ajax({
        type: 'get',
        url: '/budget/selAllBudget',
        dataType: 'json',
        success: function (res) {
            if (res.flag) {

                $.each(res.obj, function (index, item) {
                    checkboxs =
                        checkbox += '<p><label class="u672_txt"><input type="checkbox" lineNo="'+item.lineNo+'" name="projectname" id="'+item.budgetId+'" value=\'' + item.budgetItemName + '\'>'+ item.lineNo +'--' + item.budgetItemName + '</label></p>'
                })

                $('#ulList').append(checkboxs)
            }
        },
        error: function () {

        },
        complete: function () {

        }
    });
    //点击显示部门选择
        $('#choose').on('click', function () {
            $('#ulList').show();
            $('.checkbox_btn').show();
        });
    //点击确认时获取选中复选框的value
    $('#confirm_btn').on('click', function (e) {
        e.stopPropagation();
        var obj = document.getElementsByName('projectname');
        var s = '';
        var id=""
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked){
                s += obj[i].value + ',';
                id += $(obj[i]).attr('id')+','
            }
        }
        $('#chooseItem').val(s);
        $('#chooseItem').attr('typeId',id);

        $('#ulList').hide();
        $('.checkbox_btn').hide();

    });
//    点击切换视图
    $('.check').click(function(){
        if($(this).attr('type')==0){
            $('#container').hide();
            $('#content').show();
            $(this).attr('type','1')
            $(this).text('切换视图')
//            $('.btnss').hide();
        }else{
            $('#container').show();
            $('#content').hide();
            $(this).attr('type','0')
            $(this).text('切换列表')
//            $('.btnss').show();
        }
    })
    function undefindData(data) {
        if (data == undefined) {
            return '';
        } else {
            return data;
        }
    }
    function undefinedNum(name){
        if(name == undefined || isNaN(name)){
            return 0
        }else{
            return name
        }
    }
    $('#cancel_btn').on('click', function (e) {
        e.stopPropagation();
        $('#ulList').hide();
        $('.checkbox_btn').hide();
    })
    var ajaxPage = {
        data: {
            page: 1,//当前处于第几页
            pageSize: 5,//一页显示几条
            useFlag: true,
        },
        init: function () {
        },
        page: function () {
            var me = this;
            layer.msg('加载中', {
                icon: 16
                ,shade: 0.01
            });
            $.ajax({
                type: 'get',
                url: '/budget/selStatistics',
                dataType: 'json',
                data: me.data,
                success: function (res) {
                    if(res.obj1){
//                            $('.allmony').html(res.obj1.allMoney)
//                            $('.zhichu').html(res.obj1.allPayMoney)
//                            $('.sheng').html(res.obj1.allBalance)
//                            $('.prc').html((Math.round(res.obj1.allPayMoney / res.obj1.allMoney * 10000) / 100.00 + "%"))
                        var a = new Date();
                        var b = a.getFullYear();
                        var str = '<span style="    margin-left: -145px;\n' +
                            '    display: inline-block;">概况：'+ b +'年'+function(){
                            if(res.obj1.budgetItemName == undefined){
                                return '全校'
                            }else{
                                return res.obj1.budgetItemName
                            }
                            }()+'预算金额'+  undefinedNum(res.obj1.allMoney) +'元，已支出金额'+ undefinedNum(res.obj1.allPayMoney) +'元('+undefinedNum(Math.round(res.obj1.allPayMoney/res.obj1.allMoney * 100*100)/100)+'%)，预支出金额'+undefinedNum(res.obj1.allAdvance)+'元('+undefinedNum(Math.round(res.obj1.allAdvance/res.obj1.allMoney * 100*100)/100)+'%)，可用金额'+ undefinedNum(res.obj1.allBalance) +'元('+undefinedNum(Math.round(res.obj1.allBalance/res.obj1.allMoney * 100*100)/100)+'%)';
                        $('#specialwz').html(str);
                    }

                    // 列表信息

                    // 图标信息
                    if(res.object.length>0){
                        if(res.object.length>=50){
                            $('#container').css('height','380%')
                        }else if(res.object.length<50 && res.object.length>=40){
                            $('#container').css('height','300%')
                        }else if(res.object.length<40 && res.object.length>=30){
                            $('#container').css('height','250%')
                        }else if(res.object.length<30 && res.object.length>=20){
                            $('#container').css('height','200%')
                        }else if(res.object.length<20 && res.object.length>=10){
                            $('#container').css('height','150%')
                        }else if(res.object.length<10 && res.object.length>=5){
                            $('#container').css('height','100%')
                        }else if(res.object.length<5){
                            $('#container').css('height','50%')
                        }
                        var arr1 = [] //预算金额
                        var arr2 = [] //
                        var arr3 = []
                        var arr4 = [] //项目名
                        var arr6 = []
                        var arr7=[]
                        var arr8=[];//预支出金额
                        var str=""

                        for(var i=0,length=res.object.length;i<length;i++){
                            var datas1 = {}
                            var datas2 = {}
                            var datas3 = {}
                            var datas4 = {}
                            var datas5={}
                            var item =  res.object[i];
                            datas1.y = parseFloat(item.itemMoney);
                            datas1.id = item.budgetId
                            datas2.y = parseFloat(item.actualExpenditure)
                            datas2.id = item.budgetId
                            datas3.y =parseFloat(item.isPayment)
                            datas4.y = parseFloat(item.allAdvance)
                            datas4.id = item.budgetId
                            datas5.y = Number(((datas3.y)-(datas4.y)).toFixed(2))
                            datas5.id = item.budgetId
                            // console.log(datas5)


                            datas3.id = item.budgetId
                            arr1.push(datas1)//预算金额
                            arr2.push(datas2)//支出金额
                            arr3.push(datas3)//可用金额
                            // console.log(arr3)
                            arr8.push(datas4)
//                            arr1.push(parseInt(item.itemMoney))//预算金额
//                            arr2.push(parseInt(item.actualExpenditure))//支出金额
//                            arr3.push(parseInt(item.isPayment))//可用金额
//                            var len = item.budgetItemName.length;
//
                            arr4.push(item.budgetItemName)//项目名称
                            arr6.push(undefindData((Math.round(item.actualExpenditure / item.itemMoney * 10000) / 100.00)))//支出百分比
                            arr7.push(item.budgetId)
                            str+='<tr> ' +
                                '<td><span style="color:rgb(43, 127, 224);cursor:pointer"  class="itemPro" title="'+item.budgetItemName+'" id="'+item.budgetId+'">'+item.budgetItemName+'</span></td> ' +
                                '<td>'+item.itemMoney+'</td> ' +
                                '<td>'+item.isPayment+'</td> ' +
                                '<td>'+undefindData(item.allAdvance)+'</td> ' +
                                '<td>'+item.actualExpenditure+'</td> ' +
                                '<td style="text-align: left"><div style="width:70%;height:12px;display:inline-block;border-radius: 5px;background: #e0e0e0"><span style="height:12px;display: inline-block;float:left;border-radius: 5px;background: #1ea0fa;width:'+function(){
                                    return undefindData((Math.round(item.actualExpenditure / item.itemMoney * 10000) / 100.00 + "%"));
                                }()+'"></span></div><div style="display:inline-block">'+function(){
                                    return undefindData((Math.round(item.actualExpenditure / item.itemMoney * 10000) / 100.00 + "%"));

                                }()+'</div></td> ' +
                                '<td><a href="javascript:;" class="detail" id="'+item.budgetId+'">支出详情</a></td> ' +
                                '</tr>'
                        }
                        $('.list').html(str)
//                        $('.btnss').css('display','block');
//                         console.log(arr1)
                        if($('#bType').val()==0){
                            bar(arr4,arr1,arr2,arr3,arr6,arr8,'bar')
                        }else{
                            bar(arr4,arr1,arr2,arr3,arr6,arr8,'spline')
                        }


                        $('#bType').change(function(){
                            if($(this).val() == 0){
                                bar(arr4,arr1,arr2,arr3,arr6,arr8,'bar')
                            }else{
                                bar(arr4,arr1,arr2,arr3,arr6,arr8,'spline')
                            }
                        })

                        me.pageTwo(res.totleNum, me.data.pageSize, me.data.page)
                    }else{
                        $('#container').html('');
//                        $('.btnss').css('display','none');
                        $.layerMsg({content:'暂无数据',icon:6})
                    }
                }

            })

        },
        pageTwo: function (totalData, pageSize, indexs) {
            var mes = this;
            $('#dbgz_page').pagination({
                totalData: totalData,
                showData: pageSize,
                prevContent:'上一页',
                nextContent:'下一页',
                jump: true,
                coping: true,
                homePage: '',
                endPage: '',
                current: indexs || 1,
                callback: function (index) {
                    mes.data.page = index.getCurrent();
                    mes.page();
                }
            });
        }
    }
    ajaxPage.page();

    function bar(arr4,arr1,arr2,arr3,arr6,arr8,type) {
         Highcharts.chart('container', {
            chart: {
                type: type,
            },
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },

            xAxis: {
                categories: arr4,
                title: {
                    text: '项目名称'
                },

                labels: {
                    maxStaggerLines:1,
                    style: {
                        y:20,
                        fontSize:'12px',  //字体
                        width:'30',
                        display:'inline-block',
                        overflow:'hidden',
                        whiteSpace:'nowrap',
                        textOverflow:'ellipsis'
                    },
                    formatter:function(){
                        var val = this.value;
                        if(val.length>6){
                                val = val.substring(0,6)+'...'
                            }else{
                            val = val;
                            }
                        return val;
                    }
                },

                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: '金额',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
             legend: {
                 layout: 'horizontal',
                 align: 'center',
                 verticalAlign: 'top',
                 x: 0,
                 y: -15,
                 floating: true,
                 // borderWidth: 1,
                 // backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                 // shadow: true
             },


        tooltip: {

                headerFormat: '<span style="font-size:10px">{point.key}</span><br/>',
               // pointFormat: '<div><span style="color:{series.color};padding:0">{series.name}: </span>' +
               // '<span style="padding:0"><b>{point.y:.2f}</b></span></div>',
                pointFormatter:function(){
                   // console.log(this)
                    if(this.series.name == '支出百分比'){
                        return '<div><span style="color: '+ this.series.color + '">'+
                            this.series.name+':</span>  <b>'+ this.y +'%</b><br/></div>'
                    } else{
                        return '<div><span style="color: '+ this.series.color + '">'+
                            this.series.name+':</span>  <b>'+ this.y +'</b><br/></div>'
                    }

                },

                shared: true,
                useHTML: true
            },
             exporting : {

                 buttons: {
                     title:"",
                     contextButton: {

                         enabled: false,
                     },


//                     symbolX: 0,
//                     symbolY: -10,
                     exportButton: {
//                         align:'center',
                         x:5,
                         y:-15,
                         text: '下载',// 修改文案
                         // Use only the download related menu items from the default
                         // context button

                         menuItems: [
                             'downloadPNG',// 这里会默认显示英文，我们可以修改JS中的源码来改成简体汉字，见下面
                             'downloadJPEG',
                             'downloadPDF',
                         ]
                     },
                     printButton: {
                         x:-30,
                         y:-15,
                         text: '打印',// 修改文案,
                         onmouseover:function(){
                             // console.log(this)
                         },
                         onclick: function () {

                             this.print();
                         }
                     }
                 }
             },
            plotOptions: {
                bar: {
//                    pointPadding: 0.2,
//                    borderWidth: 0,
//                    pointWidth: 7,
                    dataLabels: {
                        enabled: true,
//                        allowOverlap: true // 允许数据标签重叠
                    },
                    showInLegend: true,
                    events: {
                        click: function(e) {
                            var id = e.point.options.id;
                            layer.open({
                                type:2,
                                area: ['90%', '80%'],
                                fix: false, //不固定
//                                maxmin: true,
                                content: '/budget/newjournal?type=3&budgetId='+id,
                            })
                        }
                    }
                }

            },
            // legend: {
            //     layout: 'vertical',
            //     align: 'right',
            //     verticalAlign: 'top',
            //     x: 0,
            //     y: 10,
            //     floating: true,
            //     borderWidth: 1,
            //     backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            //     shadow: true,
            //     color:['#3b72ff', '#ff640a', '#23af80']
            //
            // },
            series:[

                {
                    name: '预算金额',
                    type: type,
                    data: arr1,
                    color:'#54c7fc'
                },
                {
                    name: '可用金额',
                    type: type,
                    data: arr3,
                    color:'#ff7466'
                },
                {
                    name: '预支出金额',
                    type: type,
                    data: arr8,
                    color:'pink'
                },
                {
                    name: '支出金额',
                    type: type,
                    data: arr2,
                    color:'#ffb54d'
                },

                {
                    name: '支出百分比',
                    type: type,
                    data: arr6,
                    color:'#44db5e'
                }
            ]

        });
    }
//    $('.big').click(function(){
//        var height = $('#container').height();
//        $('#container').height(height+100);
//        ajaxPage.page();
//    })
    $('#query').click(function(){
        ajaxPage.data.budgetIds=$('#chooseItem').attr('typeId')
        ajaxPage.data.budgetItemBegindate = $('#budgetItemBegindate').val();
        ajaxPage.data.budgetItemEnddate = $('#budgetItemEnddate').val();
        ajaxPage.page();
    })
    $('.list').on('click','.detail',function(){
        var id = $(this).attr('id')
        window.open('/budget/outDetail?budgetId='+id)
    })
    $('.list').on('click','.itemPro',function(){
        var id = $(this).attr('id')
        layer.open({
            type:2,
            area: ['1000px', '430px'],
            fix: false, //不固定
//                                maxmin: true,
            content: '/budget/newjournal1?budgetId='+id,
        })
    })



</script>

</html>
